<template>
  <a-card :bordered="false">
    <a-spin :spinning="loading">
      <a-form
        @submit="handleSubmit"
        :form="form"
      >
        <a-form-item
          label="一级目录"
          :labelCol="{lg: {span: 2}, sm: {span: 4}}"
          :wrapperCol="{lg: {span: 6}, sm: {span: 17} }"
        >
          <a-select
            name="primaryCategoryId"
            v-model="primaryCategoryId"
            @change="handlePrimaryCategoryIdChange"
          >
            <a-select-option
              v-for="category in primaryCategoryData"
              :key="category.categoryId"
            >
              {{ category.categoryName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="二级目录"
          :labelCol="{lg: {span: 2}, sm: {span: 4}}"
          :wrapperCol="{lg: {span: 6}, sm: {span: 17} }"
        >
          <a-select
            name="secondaryCategoryId"
            v-model="secondaryCategoryId"
          >
            <a-select-option
              v-for="category in secondaryCategoryData"
              :key="category.categoryId"
            >
              {{ category.categoryName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="技能名称"
          :labelCol="{lg: {span: 2}, sm: {span: 4}}"
          :wrapperCol="{lg: {span: 6}, sm: {span: 17} }"
        >
          <a-input
            v-decorator="[
              'skillName',
              {rules: [{ required: true, message: '请输入技能名称' }]}
            ]"
            name="skillName"
            placeholder="技能名称"
          />
        </a-form-item>
        <a-form-item
          :wrapperCol="{lg: {span: 6}, sm: {span: 20} }"
          style="text-align: center"
        >
          <a-button
            htmlType="submit"
            type="primary"
            style="padding: 0 30px;"
          >添加</a-button>
        </a-form-item>
      </a-form>
    </a-spin>

    <s-table
      ref="table"
      size="default"
      :key="requestListOrChildCategoryId"
      :rowKey="(record, index)=> index"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
    >
      <span
        slot="action"
        slot-scope="text, record"
      >
        <template>
          <a @click="handleOpenUpdateSkillModal(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除此技能吗？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDeleteSkill(record)"
          >
            <a>删除</a>
          </a-popconfirm>
        </template>
      </span>
    </s-table>

    <update-skill-modal
      ref="updateSkillModal"
      @updateSkill="handleUpdateSkill"
    />
  </a-card>
</template>

<script>
import { STable } from '@/components'
import {
  getSkillList, createSkill,
  getCategoryChild, deleteSkillById, updateSkill
} from '@/api/manage'
import { SKILL_LIST_COLUMNS, NOTICE_MESSAGE } from './constants/skill'
import UpdateSkillModal from './components/UpdateSkillModal'
import { EMPTY_LOAD_DATA } from '@/constants/tableData'

export default {
  name: 'TableListPage',
  components: {
    STable,
    UpdateSkillModal
  },
  data() {
    return {
      form: this.$form.createForm(this),
      columns: SKILL_LIST_COLUMNS,
      loadData: EMPTY_LOAD_DATA,
      loading: false,
      primaryCategoryData: [],
      primaryCategoryId: null,
      secondaryCategoryData: [],
      secondaryCategoryId: null
    }
  },
  computed: {
    requestListOrChildCategoryId() {
      if (this.secondaryCategoryId !== null) {
        return this.secondaryCategoryId
      }
      return this.primaryCategoryId
    }
  },
  created() {
    this.getCategoryChildByParentId(0, resData => {
      this.primaryCategoryData = resData
      this.primaryCategoryId = resData[0].categoryId
      this.handlePrimaryCategoryIdChange(this.primaryCategoryId)
    })
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          const categoryId = this.requestListOrChildCategoryId
          createSkill({ categoryId, skillName: values.skillName }).then(res => {
            this.$message.success(NOTICE_MESSAGE.createSkillSuccess)
            this.$refs.table.refresh()
            this.form.setFieldsValue({ skillName: '' })
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    handlePrimaryCategoryIdChange(categoryId) {
      this.getCategoryChildByParentId(categoryId, resData => {
        if (resData.length > 0) {
          this.secondaryCategoryData = resData
          this.secondaryCategoryId = resData[0].categoryId
          return
        }
        this.secondaryCategoryData = []
        this.secondaryCategoryId = null
      })
    },
    handleDeleteSkill(category) {
      this.loading = true
      deleteSkillById(category.skillId)
        .then(res => {
          this.$message.success(NOTICE_MESSAGE.deleteSkillSuccess)
          this.$refs.table.refresh()
          this.loading = false
        })
    },
    handleOpenUpdateSkillModal({ categoryId, skillId, skillName }) {
      this.$refs.updateSkillModal.show({ categoryId, skillId, skillName })
    },
    handleUpdateSkill(category, callback) {
      updateSkill(category)
        .then(res => {
          callback()
          this.$refs.table.refresh()
          this.$message.success(NOTICE_MESSAGE.updateSkillSuccess)
        }).catch(err => {
        callback(err)
      })
    },
    getCategoryChildByParentId(parentId, callback) {
      getCategoryChild(parentId)
        .then(res => {
          callback(res.resData)
        }).catch(err => {
        callback(err)
      })
    },
    updateSkillList(categoryId) {
      this.loadData = (parameter) => getSkillList(categoryId, parameter)
        .then(res => {
          return res.resData
        })
    }
  },
  watch: {
    requestListOrChildCategoryId: function (categoryId) {
      if (categoryId === null) {
        this.loadData = EMPTY_LOAD_DATA
      } else {
        this.updateSkillList(categoryId)
      }
    }
  }
}
</script>
